<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #login{
            width: 130px; 
            height: 36px;
            background: #4e6ef2;
            color: white;
            border: 0;
            border-radius: 6px;
            font-weight: bold;
        }
        #login:hover{
            background: #627ff5;
        }
    </style>
</head>
<body>
    <h2>用户注册</h2>
    <!-- 
        表单中包含文件上传时，需要做如下设置：
            1.设置method="post"
            2.设置enctype="multipart/form-data"
     -->
    <form action="" method="get" enctype="multipart/form-data">
        用户名：<input type="text" name="username" value="tom" size="10px" maxlength="6" readonly disabled> <br>
        邮&nbsp;&nbsp;&nbsp;箱：<input type="text" name="email"> <br>
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"> <br>
        性别：<input type="radio" name="sex" value="male" checked>男
             <input type="radio" name="sex" value="female">女 <br>
        爱好：<input type="checkbox" name="hobbies"  value="eat" checked>吃饭
             <input type="checkbox"  name="hobbies" value="sleep">睡觉 
             <input type="checkbox"  name="hobbies" value="doudou">打豆豆 <br>
        头像：<input type="file" name="avatar" accept=".jpg, .png, .gif"> <br>
             <input type="hidden" name="id" value="9527"> 
        学历：<select name="degree">
                <option value="0">--请选择学历--</option>
                <option value="1">大专</option>
                <option value="2" selected>本科</option>
                <option value="3">研究生</option>
                <option value="4">硕士</option>
             </select> <br>
        城市：<select name="city">
                <optgroup label="江苏">
                    <option value="">南京</option>
                    <option value="">扬州</option>
                    <option value="">苏州</option>
                    <option value="">徐州</option>
                </optgroup>
                <optgroup label="山东">
                    <option value="">日照</option>
                    <option value="">济南</option>
                    <option value="">盐城</option>
                    <option value="">青岛</option>
                </optgroup>
             </select><br>
        服务协议：<textarea name="work" cols="30" rows="6" style="resize: none;" readonly>请遵守国家的法律法规.......</textarea>

             <br>
             <input type="submit" value="注    册">
             <input type="reset" value="重    置">
             <input type="button" value="登陆" onclick="alert('嘿嘿')" id="login">
    </form>
</body>
</html>